<template>
    <div class="inside-comment">
        <div class="userInfo-layout">
            <div class="layout">
                <nav class="sidebar-menu">
                    <router-link to="/recruitment/user/userInfo/profile" :class="{ active: $route.name === 'RecruitmentUserProfile' }">
                        <span>个人信息</span>
                    </router-link>
                    <router-link to="/recruitment/user/userInfo/applications" :class="{ active: $route.name === 'RecruitmentApplicationRecords' }">
                        <span>投递记录</span>
                    </router-link>
                    <router-link to="/recruitment/user/userInfo/favorites" :class="{ active: $route.name === 'RecruitmentFavoriteJobs' }">
                        <span>收藏职位</span>
                    </router-link>
                </nav>
                <div class="m-sidebar-menu-box">
                    <!-- <el-menu
                        :default-active="activeIndex"
                        class="el-menu-vertical"
                        router
                    >
                        <el-sub-menu index="1" ref="submenuRef">
                            <template #title>
                                <el-icon><Menu /></el-icon>
                                <span>{{$route.meta.title}}</span>
                            </template>
                            <el-menu-item 
                            v-for="menu in menuList" 
                            :key="menu.path" 
                            :index="menu.path"
                            @click="handleMenuItemClick(menu.path)"
                            >
                            {{ menu.title }}
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu> -->
                    <div class="cur-tit" @click="toggleMenu">
                        <span>{{$route.meta.title}}</span>
                        <el-icon><Menu /></el-icon>
                    </div>
                    <transition name="slide">
                        <ul class="m-sidebar-menu" v-show="isExpanded" @click="handleMenuClick">
                            <li v-for="menu in menuList" 
                                :key="menu.name" 
                                :index="menu.name" 
                                :class="{ active: $route.name === menu.name }">
                                <router-link :to="menu.path">{{menu.title}}</router-link>
                            </li>
                        </ul>
                    </transition>
                </div>
                <div class="main-content">
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Menu } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// const activeIndex = ref(route.path);

// const submenuRef = ref(null);

// const handleMenuItemClick = (index) => {
//   activeIndex.value = index;
//   // 确保 DOM 更新后再访问 submenu 实例
//   nextTick(() => {
//     if (submenuRef.value && submenuRef.value?.handleClose) {
//       submenuRef.value.handleClose()
//     } else if (submenuRef.value && submenuRef.value?.close) {
//       submenuRef.value.close()
//     } else if (submenuRef.value && submenuRef.value.$parent?.closeSubMenus) {
//       // 回退方案：某些版本中需要调用父组件的方法关闭
//       submenuRef.value.$parent.closeSubMenus()
//     }
//   })
  
// };

const menuList = ref([
    {path:"/recruitment/user/userInfo/profile",title:"个人信息", name:"RecruitmentUserProfile"},
    {path:"/recruitment/user/userInfo/applications",title:"投递记录", name:"RecruitmentApplicationRecords"},
    {path:"/recruitment/user/userInfo/favorites",title:"收藏职位", name:"RecruitmentFavoriteJobs"},
])
// 菜单展开状态
const isExpanded = ref(false);
// 切换菜单展开状态
const toggleMenu = () => {
    isExpanded.value = !isExpanded.value;
};

// 处理菜单项点击
const handleMenuClick = (event) => {
    // 如果点击的是菜单项，收起菜单
    if (event.target.closest('router-link')) {
        isExpanded.value = false;
    }
};

// 监听路由变化，重置菜单状态
onMounted(() => {
    router.afterEach(() => {
        isExpanded.value = false;
    });
});
</script>

<style lang="scss" scoped>
.inside-comment {
    padding: px2rem(40) 0 px2rem(80);
    .userInfo-layout {
        .layout {
            display: flex;
            justify-content: space-between;
            .m-sidebar-menu-box {
                display: none;
            }
            .sidebar-menu {
                height: fit-content;
                width: 32%;
                background-color: #fff;
                box-shadow: 0 0 10px rgba(#000,0.1);
                border-radius: px2rem(10);
                overflow: hidden;
                a {
                    padding:px2rem(20);
                    box-sizing:border-box;
                    display:flex;
                    &.active {
                        background-color: var(--el-color-primary-light-9);
                        border-left: px2rem(4) solid var(--el-color-primary);
                        color: var(--el-color-primary);
                    }
                    span {
                        font-size: px2rem(18);
                    }
                }
            }
            .main-content {
                width: 66%;
            }
        }
    }
}
/* 菜单展开收起动画 */
.slide-enter-active,
.slide-leave-active {
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
    will-change: max-height;
}

.slide-enter-from,
.slide-leave-to {
    max-height: 0;
}

.slide-enter-to,
.slide-leave-from {
    max-height: 150px;
}
@media (max-width:960px) {
    .inside-comment {
        padding: 20px 0 40px;
        .userInfo-layout .layout  {
        display: block;
        .m-sidebar-menu-box {
            display: block;
            .cur-tit {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                color: #fff;
                height: 48px;
                font-size: 18px !important;
                background-color: var(--el-color-primary);
                padding: 0 20px;
                box-sizing: border-box;
                cursor: pointer;
            }
            ul {
                background: var(--el-color-primary-light-9);
                padding: 24px;
                li {
                    font-size: 16px;
                    line-height: 34px;
                    &.active {
                        a {
                            color: var(--el-color-primary);
                        }
                    }
                    a {
                        display: block;
                    }
                }
            }
        }
        .sidebar-menu {
            display: none;
            width: 100%;
        }
        .main-content {
            width: 100%;
            margin-top: 20px;
        }
    }
    }
}
</style>